import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { getOrderInfo, getUserPayPwd, VerifyPwd,payment } from '../../../request/instance'
import '../css/icon.scss'
import Orderform_item from './Orderform_item'
import '../css/orderPay.scss'
import { NumberKeyboard, PasscodeInput, Modal, Dialog } from 'antd-mobile'
const payway = [
    {
        key: '1',
        name: '余额支付',
        icon: 'iconfont icon-yue'
    },
    {
        key: '2',
        name: '支付宝支付',
        icon: 'iconfont icon-zhifubao'
    }
]
export default function OrderPay() {
    const { state: { id } } = useLocation()
    const [data, setData] = useState({})
    const [pay, setPay] = useState(1)
    const [error, setError] = useState(false)
    const [value, setValue] = useState('')
    const navigate = useNavigate()
    const [show, setShow] = useState(false)
    const inputokok = useRef()
    let total_amount = useMemo(() => {
        let nums = 0

        data.goodsid ? data.goodsid.forEach(item => {
            nums += item.count * item.price
        }) : ''
        return nums
    }, [data])
    const inputok = async () => {
        // 向后端进行密码验证并且支付
        const res = await VerifyPwd({ _id: data.uid, pwd: value, out_trade_no: Date.now(), total_amount, pid: id })
        if (res.data.code == 200) {
            alert('支付成功')
            setShow(false)
            navigate('/orderform?cate=2')
        } else {
            setValue('')
            alert('支付失败,请正确输入密码')
            setShow(false)
        }

    }
    const getInfo = async () => {
        const { data: { data } } = await getOrderInfo(id)
        setData(data)
        // console.log(data);
    }
    useEffect(() => {
        getInfo()
    }, [])
    
    useEffect(()=>{
        if(show === true){
            inputokok.current.focus()
        }
    },[show])
    //  进行选择支付方式支付
    const payok = async () => {
        if (pay === '1') {
            // 余额支付
            let res = await getUserPayPwd({ id: data.uid })
            if (res.data.code === 200) {
                // 请输入密码
                setShow(true)
            } else {
                // 未设置密码
                navigate('/setPay')
            }
        } else {
            //  支付宝支付
            //进行调用支付宝接口
            let res = await payment({
                order_id: Date.now(),
                name: '支付宝支付',
                price: total_amount,
                user: data.uid,
                pid: id
            })
            if (res.data.code == 200) {
                window.location.href = res.data.data
            }

        }
    }
    const flaseshow = (event) => {
        event.stopPropagation();
    }

    return (
        <div className='orderPay'>
            {
                data.goodsid ? <>
                    <div className="orderform_items">
                        <Orderform_item info={data.goodsid}></Orderform_item>
                    </div>
                    {/* <div className="orderform_ding_box">
                        <p>订单号：{data._id}</p>
                        <Orderform_num goodsid={data.goodsid}></Orderform_num>
                    </div> */}
                </> : '加载中...'
            }

            <div className="orderform_pay_box">
                请选择支付方式
            </div>
            <div className="payway">
                {
                    payway.map(item => {
                        return (
                            <div className="payway_item" key={item.key}>
                                <span className={item.icon}></span>
                                <p>{item.name}</p>
                                <input type="radio" name='pay' value={item.key} onChange={e => setPay(e.target.value)} />
                            </div>
                        )
                    })
                }
            </div>
            {
                show ? <div className="mask" onClick={(event) => { flaseshow(event) }} >
                    <div className="show">
                        <PasscodeInput ref={inputokok}  onBlur={()=>{setShow(false)}} keyboard={<NumberKeyboard />} value={value} onChange={e => { setValue(e) }} onFill={inputok} />
                    </div>
                </div> : ''
            }

            <div className="okpay">
                <button onClick={payok}>确认支付</button>
            </div>
        </div>
    )
}
